<template>
  <section v-loading="loading" class="cms-body flex">
    <!-- 树组件 -->
    <cms-tree @change="getChannelId" :copy="false" :hasContent='false'></cms-tree>
    <div class="cms-content-right">
      <!-- 频道 -->
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left" v-if="breadState">
          <label class="">当前频道:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>
        <div class="cms-left channel-group">
          <el-button type="primary" v-if="showAdd" @click="addChannel()" v-perms="'/channel/save'">
            <i class="el-icon-plus"></i> 频道添加
          </el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe @selection-change="checkIds">
        <el-table-column type="selection" width="35" align="right"></el-table-column>
        <el-table-column prop="id" label="id" width="60" align="center"></el-table-column>
        <el-table-column label="频道名称" prop="name" align="left"></el-table-column>
        <el-table-column label="频道路径" prop="path" align="center" width="100"></el-table-column>
        <el-table-column label="排列顺序" prop="priority" align="center" width="75">
          <div slot-scope="scope">
            <el-input v-model="scope.row.priority" @blur='checkP(scope.row.priority)' type='number'
                      class="w50"></el-input>
          </div>
        </el-table-column>
        <el-table-column label="显示" prop="display" align="center" width="75">
          <div slot-scope="scope">
            <span v-if="scope.row.display">是</span>
            <span v-else>否</span>
          </div>
        </el-table-column>
        <el-table-column label="是否推荐" prop="isRecommend" align="center" width="75">
          <div slot-scope="scope">
            <span v-if="scope.row.isRecommend==1">是</span>
            <span v-else>否</span>
          </div>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <div slot-scope="scope">
            <cms-button type="edit" @click.native="routerLink('/channel/update','update',scope.row.id)"
                        v-perms="'/channel/update'"></cms-button>
            <cms-button type="delete" @click.native="channelDeleteBatch($api.channelDelete,scope.row.id,scope.row)"
                        v-perms="'/channel/delete'"></cms-button>
          </div>
        </el-table-column>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:52px;">
        <div class="cms-left">
          <el-button @click="priorityBatch($api.channelPriority)" :disabled="disabled" v-perms="'/channel/priority'">
            保存排序
          </el-button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from 'axios'
  import router from '@/router/roles'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {
          //请求参数
          parentName: '',
          parentId: '',
          channelLevel: 0,
          modelId: '',
          https: '',
          hasCollect: ''
        },
        isShow: true,
        breadState: false,
        allTotal: 0, //分页总数
        breadItems: [
          {
            name: '根目录',
            id: ''
          }
        ], //面包屑
        channelInfo: {}, //当前频道信息
        showAdd: false
      }
    },
    methods: {
      //检查排列顺序不能为空且不能超过4位数
      checkP(value) {
        let reg = /^([1-9]\d{0,3}|0)$/
        if (!reg.test(value)) {
          this.open()
        }
      },
      open() {
        this.$alert('排列顺序不能为空且不能超过4位数', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.initTableData(this.$api.channelList, this.params)
          }
        })
      },
      addChannel() {
        //添加频道
        this.routerLink('/channel/save', 'save', 0, this.params)
      },
      checkChange(node, checkStatus, childStatus) {
        //频道dialog节点选中事件，处理checkbox 只能选择一个
        if (checkStatus) {
          this.currentCheckChannelId = node.id
          this.$refs['channelTree'].setCheckedKeys([node.id], true)
        }
      },
      getChannelId(data, node) {
        console.log(data)
        if (data.roleType == 0) {
          this.showAdd = false;
          if (data.channelLevel < 2) {
            this.showAdd = true;
          }
        }
        //获取频道树点击
        if (data.channelLevel != 2) {
          this.breadState = true
          this.creatBread(node, [])
          this.params.parentId = data.id //传递频道id
          this.params.channelLevel = data.channelLevel;
          this.params.modelId = data.modelId //传递频道id
          this.params.parentName = data.name
          this.getTableData(this.params) //获取内容信息
        }
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false
        }
      },
      priorityBatch(url) {
        this.$confirm('是否保存排序', '提示', {type: 'warning'}).then(mes => {
          let prioritys = []
          for (let i in this.checkedList) {
            prioritys.push(this.checkedList[i].priority)
          }

          this.$http.post(url, {ids: this.ids, prioritys: prioritys.join(',')}).then(res => {
            if (res.code == '200') {
              this.successMessage('保存成功')
              this.getTableData(this.params)
            }
          })
        }).catch(error => {
        })
      },
      channelDeleteBatch(url, ids, channel) {
        let roleType = channel.roleType;
        if (roleType == 1) {
          this.errorMessage('该频道为特殊频道，不允许删除');
          return false;
        }
        this.$confirm('是否确定删除？', '警告', {type: "error"}).then(mes => {
          this.$http.post(url, {ids: ids}).then(res => {
            console.log(res);
            if (res.code == "200") {
              this.successMessage('删除成功');
              this.getTableData(this.params);
            }
          });
        }).catch(error => {
          console.log(error);
        });
      }
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      this.loading = false
      this.breadState = false
      if (this.$route.query.type == 'chart.vue') {
        if (this.$route.query.id == 0) {
          this.params.parentId = ''
        } else {
          this.params.parentId = this.$route.query.id
        }
      }
      this.initTableData(this.$api.channelList, this.params) //请求列表
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style scoped>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

  .dialog .tree-layout {
    min-height: 400px;
    width: 90%;
  }

  .dialog .tree-layout .tree {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    border-right: 0px solid #d4dde2;
  }

</style>
